<template>
  <div class="app-container">
    <!--    <el-card style="width: 100%; margin-bottom:20px;">-->
    <!--      <div style="display:flex; justify-content: space-between;">-->
    <!--        <div style=" display:flex; color:#787878; font-size:14px;">-->
    <!--          <div style="width: 400px; margin-right:40px;">-->
    <!--            <el-date-picker v-model="birthday_start" style="width: 140px;margin-left: 5px;"-->
    <!--                            value-format="yyyy-MM-dd" size="small" type="datetime" placeholder="开始时间" @change="timeChange" :picker-options="{disabledDate:dateOptions}" />-->
    <!--            <el-date-picker v-model="birthday_end" style="width: 140px;margin-left: 5px;"-->
    <!--                            value-format="yyyy-MM-dd" size="small" type="datetime" placeholder="截至日期" @change="timeChange" :picker-options="{disabledDate:dateOptions}" />-->
    <!--          </div>-->
    <!--          <div style="width: 240px; margin-top: 15px;">-->
    <!--            <el-button type="primary" size="small" @click.stop="getList">-->
    <!--              搜索-->
    <!--            </el-button>-->
    <!--          </div>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--    </el-card>-->

    <el-card style="margin-bottom: 10px; font-size: 14px;">
      短信累计充值<span style="color:#41c3a8;">{{ list.total.message_num_all }}</span>条，已消耗<span
        style="color:#41c3a8;"
      >{{ list.total.message_num_xiaohao }}</span>条，剩余<span
        style="color:#41c3a8;"
      >{{ list.total.message_num }}</span>条
    </el-card>

    <el-table
      ref="singleTable"
      v-loading="listLoading"
      :row-style="{ background: '#f2f2f2' }"
      style="width: 100%"
      stripe
      :data="list.course"
      highlight-current-row
      @current-change="handleSelectionChange"
    >
      <div slot="empty" class="m-empty-box">
        <div class="mar" style="width: 168px;height: 180px;">
          <img src="https://www.jianyigongxiang.com/public/membercard/empty.png" class="wh100">
        </div>
        <div class="title">暂无数据</div>
      </div>
      <el-table-column label="场馆">
        <template slot-scope="{row}">
          <span>{{ row.name }}</span>
        </template>
      </el-table-column>

      <el-table-column label="累计分发">
        <template slot-scope="{row}">
          <span>{{ row.message_num_all }}</span>
        </template>
      </el-table-column>

      <el-table-column label="已消耗">
        <template slot-scope="{row}">
          <span>{{ row.message_num_all-row.message_num }}</span>
        </template>
      </el-table-column>

      <el-table-column label="剩余条数">
        <template slot-scope="{row}">
          <span>{{ row.message_num }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="{row}">
          <div class="dis disAl flwa">
            <div class="dis disAl mar-right10 cuPo" @click="fenfa(row.id,row.name)">
              分发
            </div>
            <div class="dis disAl mar-right10 cuPo" @click="fenfajilu(row.id)">
              分发记录
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="list.count>0"
      :total="list.count"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />

    <div v-if="shuaVisible" class="zhezhao wh100" />
    <div v-if="shuaVisible" v-loading="loading" class="zhezhaoN dis disAl disJuC wh100">
      <div class="poRel borRad10 bacFFF" style="width: 862px;">
        <div class="wid90 mar">
          <div class="wid100 dis disAl disJuB" style="padding: 30px 0 10px;">
            <div class="dis disAl">
              <div class="foSi20 fowe600 mar-right10">新增场馆</div>
            </div>
            <svg-icon
              icon-class="guanbi"
              class="mar0 cuPo"
              style="color: #ACACAC;width: 24px;height: 24px;"
              @click.stop="shuaVisibleClick()"
            />
          </div>
          <div class="" style="padding: 20px 0;">
            <el-form ref="ruleForm" :model="ruleForm" :rules="rules">
              <div class="dis disAl disJuB" style="flex-wrap: wrap">
                <div class="dis disAl disJuB hei44 itFor ites" style="">
                  <div>
                    <span class="foSi10" style="color: #ff0000;margin-right: 4px;">*</span>
                    <span class="foSi14">场馆：{{ ruleForm.fenfaname }}</span>
                  </div>
                </div>
                <div class="dis disAl disJuB hei44 itFor ites" style="">
                  <div>
                    <span class="foSi10" style="color: #ff0000;margin-right: 4px;">*</span>
                    <span class="foSi14">分发短信条数</span>
                  </div>
                  <el-form-item class="mp0" prop="num">
                    <el-input
                      v-model.number="ruleForm.num"
                      style="width: 230px"
                      placeholder="请输入分发短信条数"
                      class="mar0 kcTime"
                    />
                  </el-form-item>
                </div>
              </div>
            </el-form>
          </div>
          <div class="wid100 dis disAl disJuC foSi14 coFFF" style="padding: 20px 0 40px">
            <div
              class="mar-right20 que cuPo"
              style="background: #48a9f3;"
              @click.stop="submitForm('ruleForm')"
            >保存</div>
            <div class="que cuPo" style="background: #616b74;" @click.stop="shuaVisibleClick()">取消</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import fetchList from '@/api/article'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import {
  distribute,
  getDistribute
} from '@/api/sms2'
import {
  getVenue
} from '@/api/venue'
import {
  getXuan
} from '@/utils/limits.js'
import {
  mapGetters
} from 'vuex'
import { SchedClassfeeDel } from '@/api/coures'
export default {
  name: 'StatisticsCoach',
  components: {
    Pagination
  },
  data() {
    return {
      loading: false,
      shuaVisible: false,
      ruleForm: {
        fenfaid: 0,
        num: 0,
        fenfaname: ''
      },
      value1: [],
      list: null,
      total: 0,
      listLoading: true,
      timeStatistics: 1,
      birthday_start: '',
      birthday_end: '',
      staffIndex: '全部',
      staff: {},
      listQuery: {
        page: 1,
        limit: 10
      },
      status: [
        {
          'id': 0,
          'name': '全部'
        }, {
          'id': 1,
          'name': '团课'
        }, {
          'id': 2,
          'name': '精品课'
        }, {
          'id': 3,
          'name': '私教课'
        }
      ],
      statusIndex: '全部'
    }
  },
  computed: {
    ...mapGetters([
      'permission_routes',
      'roles'
    ])
  },
  created() {
    var xuanList = [{
      name: '课时费统计',
      url: '/finance/statisticsCoach',
      pd: true
    }]
    var xuanList1 = getXuan(xuanList, this.roles)
    this.$store.dispatch('user/changeXuan', {
      key: 'xuanList',
      value: xuanList1
    })
    this.$store.dispatch('user/changeXuan', {
      key: 'xuan',
      value: 0
    })
    this.timeCreated(1)
    this.getVenue(1)
    this.getList()
  },
  methods: {
    getVenue() {
      getVenue({}).then(response => {
        const {
          data
        } = response
        this.staff = data
      }).catch(error => {
        console.log(error)
        this.loading = false
      })
    },
    timeCreated(index) {
      var now = new Date()
      var month = now.getMonth()
      var year = now.getFullYear()
      var first = new Date(year, month, 1)
      var first2 = new Date(year, month - 3, 1)
      var last2 = new Date(year, month, 1)
      var first3 = new Date(year, month - 6, 1)
      var last3 = new Date(year, month, 1)
      if (index === 1) {
        this.birthday_start = first
        this.birthday_end = now
      } else if (index === 2) {
        this.birthday_start = first2
        this.birthday_end = last2
      } else if (index === 3) {
        this.birthday_start = first3
        this.birthday_end = last3
      }
    },
    statisticsClick(index) {
      if (index !== this.timeStatistics) {
        this.timeStatistics = index
        this.timeCreated(index)
      }
    },
    timeChange(e) {
      this.timeStatistics = 0
    },
    getList() {
      this.listLoading = true
      distribute({
        'limit': this.listQuery.limit,
        'page': this.listQuery.page,
        'startTime': this.birthday_start,
        'endTime': this.birthday_end,
        'staffIndex': this.staffIndex,
        'statusIndex': this.statusIndex
      }).then(response => {
        const {
          data
        } = response
        this.listQuery.page = data.current_page
        this.total = data.total
        this.list = {
          'count': data.total,
          'total': {
            'message_num_all': data.message_num_all,
            'message_num': data.message_num,
            'message_num_xiaohao': data.message_num_xiaohao
          },
          'course': data.data
        }
        this.listLoading = false
        this.shuaVisible = false
      }).catch(error => {
        console.log(error)
        this.loading = false
      })
    },
    handleSelectionChange(val) {
      console.log(val.length)
      this.xuancount = val.length
      this.multipleSelection = val
    },
    fenfajilu(id) {
      this.$router.push('/sms2/distributeLog?id=' + id)
    },
    fenfa(id, name) {
      console.log(id)
      this.shuaVisible = true
      this.ruleForm.fenfaid = id
      this.ruleForm.fenfaname = name
      console.log(this.shuaVisible)
    },
    shuaVisibleClick() {
      this.shuaVisible = false
      this.ruleForm.num = 0
      this.ruleForm.fenfaid = 0
      this.ruleForm.fenfaname = ''
    },
    submitForm() {
      getDistribute({
        'id': this.ruleForm.fenfaid,
        'num': this.ruleForm.num
      }).then(response => {
        const {
          data
        } = response
        if (response.code == 0) {
          this.$message({
            message: '成功',
            type: 'success'
          })
          this.getList()
          this.shuaVisibleClick()
        } else {
          this.$message.error(response.msg)
        }
      }).catch(error => {
        console.log(error)
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.edit-input {
  padding-right: 100px;
}

.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}

.typelists {
  cursor: pointer;
  margin-right: 30px;
  margin-bottom: 10px;
  vertical-align: middle;
  font-size: 12px;
}

.typexuan {
  color: #41c3a8;
}

::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td {
  background-color: #616b74;
  color: #fff;
}

::v-deep .el-table--enable-row-hover .el-table__body tr>td {
  color: #000;
}

/* ::v-deep .el-table__body .el-table__row.hover-row td {
  background-color: #616b74
} */
.time-cycle__item:first-child {
  border-radius: 4px 0 0 4px;
}

.time-cycle__item {
  position: relative;
  margin-left: -1px;
  width: 74px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border: 1px solid #d9d9d9;
  cursor: pointer;
}

.time-cycle__item:last-child {
  border-radius: 0 4px 4px 0;
}

.normal-description {
  padding-top: 30px;
  margin-bottom: 5px;
}

.normal-padding {
  padding: 0 63px;
}

.normal-description__title {
  font-size: 12px;
  color: #787878;
  height: 22px;
}

.normal-description__content {
  padding: 12px 20px;
  background: #f6f6f6;
  line-height: 30px;
}

.normal-description__item {
  position: relative;
  padding-left: 25px;
  line-height: 1.8;
}
.time-cycle__item.curr {
  border: 1px solid #6b7cdd;
  color: #6b7cdd;
  z-index: 2;
}
</style>
